<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获得元素</title>
</head>
<body>

    <!--
    getElementById: 返回 HTMLElement 或 null。
    getElementsByClassName 和 getElementsByTagName: 返回 HTMLCollection。
    querySelector: 返回第一个匹配的 Element 或 null。
    querySelectorAll: 返回所有匹配的元素，类型为 NodeList。
    -->
    <h1>获得元素</h1>
    <table border="1px" cellspacing="0" cellpadding="0">
        <tr>
            <td>方法</td>
            <td>描述</td>
        </tr>
        <tr>
            <td>document.getElementById(id)</td>
            <td>通过id获得元素</td>
        </tr>
         <tr>
            <td>document.getElementByClassName(className)</td>
            <td>通过class获得元素</td>
        </tr>
        <tr>
            <td>document.getElementByName(Name)</td>
            <td>通过Name获得元素</td>
        </tr>
        <tr>
            <td>document.querySelecttor('css选择器')</td>
            <td>通过css选择器获得一个元素</td>
        </tr>
         <tr>
            <td>document.getElementByTagName(TagName)</td>
            <td>通过标签获得元素</td>
        </tr>
         <tr>
            <td>document.querySelectorAll('css选择器')</td>
            <td>通过css选择器获得多个元素</td>
        </tr>
    </table>
 
     <p id="p1">通过id获得这个段落</p >
    <a href="#" class="c1">世界之光</a >
    <a href="#" class="c1">世界之巅</a >
    <span>你好，才是真的好！</span>
    <span>我好，才是大家好！</span>
    <script>
//通过id获得元素
let str = document.getElementById('p1');
console.log(str);
console.log('-----------------');
//通过class获得元素
let str2 = document.getElementsByClassName("c1");
console.log(str2);
console.log('-----------------');
//通过标签获得元素
let arr = document.getElementsByTagName("td");
for(let i = 0; i < arr.length; i++){
    console.log(arr[i]);
    
}
console.log('-----------------');
//通过选择器获得元素
let arr1 = document.querySelector("#p1")
console.log(arr1);
console.log('-----------------');
//通过class选择器获得元素
let arr2 = document.querySelectorAll(".c1")
arr2.forEach(function(td){
    console.log(td);
    
});
console.log('-----------------');
    </script>
</body>
</html>